<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>魔法导航菜单</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="navigation">
    <ul>
      <li class="active">
        <a href="#">
          <span class="icon">
            <ion-icon name="home-outline"></ion-icon>
          </span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="icon">
            <ion-icon name="person-outline"></ion-icon>
          </span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="icon">
            <ion-icon name="chatbubble-outline"></ion-icon>
          </span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="icon">
            <ion-icon name="camera-outline"></ion-icon>
          </span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="icon">
            <ion-icon name="settings-outline"></ion-icon>
          </span>
        </a>
      </li>
      <div class="indicator">
        <span></span>
      </div>
    </ul>
  </div>
</body>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<script>
  let list = document.querySelectorAll('.navigation li')

  function activeLink() {
    list.forEach(item => {
      item.classList.remove('active')
      this.classList.add('active')
    })
  }

  list.forEach(item => {
    item.addEventListener('click', activeLink)
  })
</script>

</html>